<template>
    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">
                <el-col :span="5" :offset="0">
                    <el-form-item label="真实姓名">
                        <el-input v-model="searchForm.realName" placeholder="真实姓名" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="手机号">
                        <el-input v-model="searchForm.phone" placeholder="手机号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="14">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="getData(1)">搜索</el-button>
                        <el-button @click="resetSearchForm">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <!-- 表格数据 -->
        <el-table :data="tableData" stripe style="width: 100%" v-loading="tableDataLoading" :border="true"
            @select="handlerSelect" 
            @selection-change="handleSelectionChange" 
            @row-click="rowClickHandle"
            highlight-current-row ref="multipleTableRef" :row-key="row => row.id">

            <el-table-column v-if="props.showSelection" type="selection" :reserve-selection="true" align="center" width="55" />

            <el-table-column label="真实姓名" width="100" align="center">
                <template #default="{ row }">
                {{ row.realName }}
                </template>
            </el-table-column>

            <el-table-column label="手机号" align="center">
                <template #default="{ row }">
                {{ row.phone }}
                </template>
            </el-table-column>

            <el-table-column label="邮箱" align="center">
                <template #default="{ row }">
                {{ row.email }}
                </template>
            </el-table-column>

            <el-table-column label="性别" width="80" align="center">
                <template #default="{ row }">
                {{ transferSex(row.sex) }}
                </template>
            </el-table-column>

            <el-table-column label="所属角色" align="center">
                <template #default="{ row }">
                {{ formatRoleName(row.roleId) }}
                </template>
            </el-table-column>

            <el-table-column label="状态" width="80" align="center">
                <template #default="{ row }">
                {{ transferPcState(row.status) }}
                </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center">
                <template #default="{ row }">
                {{ dateFormatter(row.createTime) }}
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-card>
</template>

<script setup>
import { ref, onMounted, reactive, defineProps } from 'vue'
import { transferSex,transferPcState,dateFormatter } from '~/utils/common.js'
import { getRoleList } from "~/api/role";
import { getApplicantUserList } from "~/api/manager";

const tableData = ref([]) // 列表数据
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const tableDataLoading = ref(false)
const roles = ref([])
const selectCheckList = ref([])
const multipleTableRef = ref()


// props
const props = defineProps({
    showSelection: false
})


// 查询条件
const searchForm = reactive({
    username: "",
    realName: "",
    phone: "",
    page: currentPage.value,
    size: limit.value,
})

// 重置搜索框
const resetSearchForm = () => {
    searchForm.username = ""
    searchForm.realName = ""
    searchForm.phone = ""
    getData()
}

function rowClickHandle(row) {
    const selectData = selectCheckList
    multipleTableRef.value.clearSelection()
    if (selectData.length == 1) {
        const [item] = selectData;
        const shouldSelect = item !== row;
        multipleTableRef.value.toggleRowSelection(row, shouldSelect);
    } else {
        multipleTableRef.value.toggleRowSelection(row, true);
    }
}
//当用户手动勾选数据行的 Checkbox 时触发的事件
function handlerSelect(selection, row) {
    //清除 所有勾选项
    multipleTableRef.value.clearSelection()
    if (selection.length == 0) return
    multipleTableRef.value.toggleRowSelection(row, true)
}

//当选择项发生变化时会触发该事件
function handleSelectionChange(val) {
    selectCheckList.value = val
    getCheckedUser()
}

// 生命周期
onMounted(async () => {
    //加载角色字典
    await getRolesDic()
    //加载表格数据
    await getData()
})

//初始化角色字典数据
async function getRolesDic() {
    getRoleList().then(res => {
        if(res){
            roles.value = res.records
        }
    })
}

//获取列表数据
async function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }
    tableDataLoading.value = true
    searchForm.page = currentPage.value
    getApplicantUserList(currentPage,searchForm)
    .then(res => {
        if(res && res.records){
            tableData.value = res.records
            total.value = res.total
        }else{
            tableData.value = []
            total.value = 0
        }
    })
    .finally(() => {
        tableDataLoading.value = false
    })
}

//角色字典数据，数据转换方法
const formatRoleName = (roleId) => {
    //console.log(roles)
    return roles.value.find(x => x.id == roleId)?.description || roleId
}

// 对外暴露方法
const emit = defineEmits([
    'getCheckedUser',
])

const getCheckedUser = () => {
    const selectData = selectCheckList
    let returnParams = selectData.value.length == 1 ? selectData.value[0] : null
    emit("getCheckedUser", returnParams)
}
</script>
